<template>
  <div>
    <ElCheckboxGroup v-model="checked" @change="handleChange">
      <ElCheckboxButton
        v-for="command in commands"
        :label="command"
        :key="command"
        @change="onChange"
      >
        {{ command }}</ElCheckboxButton
      >
      <CommonActionButtonGroup
        :buttons="buttons"
        @command="handleCommend($event, { a: 1, b: 1 })"
      >
      </CommonActionButtonGroup>
      <CommonActionButtonGroup
        trigger="click"
        :buttons="buttons"
        @command="handleCommend($event, { a: 1, b: 1 })"
      >
      </CommonActionButtonGroup>
    </ElCheckboxGroup>
  </div>
</template>

<script>
import CommonActionButtonGroup from "./HelloWorld.vue";
export default {
  name: "HelloWorld",
  components: {
    CommonActionButtonGroup,
  },
  data() {
    return {
      checked: [],
      commands: ["编辑", "删除", "启用", "禁用", "重新上传"],
      buttons: {
        edit: {
          text: "编辑",
          disabled: true,
          hidden: false,
        },
        delete: { text: "删除", hidden: false },
        enable: {
          text: "启用",
          disabled: true,
          hidden: false,
        },
        disable: {
          text: "禁用",
          hidden: false,
        },
        reupload: {
          text: (h) => {
            return [h("span", { slot: "default" }, "重新-----上传")];
          },
          divided: true,
          icon: "el-icon-plus",
          hidden: false,
        },
      },
    };
  },
  methods: {
    onChange(e) {
      console.log("this.$root 调取根组件实例");
      this.$root.changeRoot(2);
    },
    handleChange(checked) {
      for (const key in this.buttons) {
        const value = this.buttons[key];
        if (checked.includes(value.text)) {
          value.hidden = true;
        } else {
          value.hidden = false;
        }
      }
    },
    handleCommend(command, record) {
      console.log(command, record);
    },
  },
};
</script>
